<template>
  <div class="forthStep">
    <div class="upload-tab">
      <div :class="item.id==activeKey? 'on baseDiv':'baseDiv'" v-for="(item,index) in dataList" :key="index" @click="changeTab(item , index)">
       <p class="inner-title">{{item.showBak1}}</p> 
       <p class="inner-title" style="font-size: 16px">{{item.showBak2}}</p>
      </div>
    </div>
    <el-tabs v-model="activeKey" @tab-click="handleClick" type="border-card">
      <el-tab-pane v-for='(item,index) in dataList' :key='index' :name='item.id' :label="item.showBak"></el-tab-pane>
      <div class="view-outer">
        <div class='view-inner' v-for="(items,index) in recordsBak" :key='index'>
          <div class="title">
            <div>{{ items.name }} </div>
          </div>
          <div style="display: flex;justify-content: flex-start;" class="inner-main-box">
            <div v-for="(v,k) in items.newChildren" :key='k' style="width: 33%;" class="groupDiv">
              <div class="inner-box">
                <div style="font-size: 16px;color: #00b99e">{{ v.childrenName }} </div>
                <div style="padding-top: 10px;font-size: 14px;">考题：<span>{{ v.children[0].examName }} </span></div> 
                </div>
              <div class="studentInfo" v-for="(pp,ind) in v.children" :key='ind' style='display: flex;'>
                <div class="main-inner">第 <span style="font-weight: 500;font-size: 20px;padding: 0 4px;">{{ pp.round }}</span> 轮</div>
                <div class="main-inner">第 <span style="font-weight: 500;font-size: 20px;padding: 0 4px;">{{ pp.scene }}</span> 次</div>
                <div class="name-inner">{{ pp.studentName || pp.anonymousNumber }}</div>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import {recordsDetail, listByDateId} from '@/api/examTest.js'
export default{
  props: ['recordsStationOptions', 'examOptions', 'recordsId', 'passwordCheck'],
  data () {
    return {
      dataList: [],
      activeKey: 0,
      recordsBak: []
    }
  },
  methods: {
    changeTab (item, index) {
      this.activeIndex = Number(index)
      this.needSave = false
      this.activeKey = item.id
      this.getRecordsstationList()
    },
    handleClick (val) {
      this.activeKey = val.name
      this.getRecordsstationList()
    },
    // 根据对象属性分组
    groupBy (array, key) {
      return array.reduce((result, currentItem) => {
        // 使用 Map 对象来存储分组后的数据
        const keyValue = currentItem[key]
        if (!result.has(keyValue)) {
          result.set(keyValue, [currentItem])
        } else {
          result.get(keyValue).push(currentItem)
        }
        return result
      }, new Map())
    },
    getRecordsstationList () {
      // 查看
      listByDateId({recordsDateId: this.activeKey, scene: 1}).then(res => {
        // let records = res.data.page.records.sort((a, b) => Number(a.recordsStationNumber) - Number(b.recordsStationNumber))
        // let recordsBak = this.groupBy(records, 'recordsStationNumber')
        // let aaa = JSON.parse(JSON.stringify(recordsBak))
        // let recordsBak2 = []
        // aaa.map(val => {
        //   recordsBak2.push(val[1])
        // })
        // recordsBak2.map(v => {
        //   v = v.sort((a, b) => Number(a.round) - Number(b.round))
        // })
        // this.recordsBak = JSON.parse(JSON.stringify(recordsBak2))
        console.log(res.data)

        let aaa = []
        for (var el in res.data.resp) {
          aaa.push({
            name: el,
            children: res.data.resp[el]
          })
        }
        aaa.map(q => {
          q.newChildren = []
          for (var ele in q.children) {
            q.newChildren.push({
              childrenName: ele,
              children: q.children[ele]
            })
          }
        })
        aaa = aaa.sort((a, b) => parseInt(a.name.substring(1, 10)) - parseInt(b.name.substring(1, 10)))
        aaa.map(v => {
          v.newChildren = v.newChildren.sort((a, b) => parseInt(a.childrenName.substring(1, 10)) - parseInt(b.childrenName.substring(1, 10)))
        })
        aaa.map(v => {
          v.newChildren.map(p => {
            p.children = p.children.sort((a, b) => parseInt(a.round) - parseInt(b.round))
          })
        })
        this.recordsBak = JSON.parse(JSON.stringify(aaa))
      })
    },
    getRecordsDetail2 () {
      let params = {
        id: this.recordsId
      }
      if (this.passwordCheck !== '') {
        params.password = this.passwordCheck
        params.passwordType = '1'
      } else {
        params.passwordType = '0'
      }
      recordsDetail(params).then(res => {
        this.dataList = res.data.examRecordsDtos[0].examRecordsDates
        this.dataList = this.dataList.sort((a, b) => new Date(a.examStartDate.substring(0, 19)).getTime() - new Date(b.examStartDate.substring(0, 19)).getTime())
        this.dataList.map(val => {
          val.showBak = val.examStartDate.substring(0, 16) + ' ~ ' + val.examEndDate.substring(5, 11)
          val.showBak1 = val.examStartDate.substring(0, 10)
          val.showBak2 = val.examStartDate.substring(11, 16) + ' ~ ' + val.examEndDate.substring(11, 16)
        })
        this.activeKey = this.dataList[0].id
        this.getRecordsstationList()
      })
    }
  }
}
</script>
<style lang='scss'>
  .forthStep{
    .el-tabs__header{
      display: none;
    }
  }
  .view-outer{
    .view-inner{
      margin: 10px;
      padding: 10px 20px;
      border: 1px solid #00b99e50;
      background: #f5f5f5;
      border-radius: 6px;
      .title{
        font-size: 18px;
        font-weight: 500;
        color: #000;
        position: relative;
        border-bottom: 1px solid #99999950;
        padding: 10px 0;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .title:before{
        content: '';
        position: absolute;
        height: 16px;
        width: 2px;
        border-radius: 2px;
        background: #00b99e;
        left: -10px;
        top: 12px;
      }
      .inner-main-box{
        .groupDiv{
          border-right: 1px dotted #21d0b6;
          margin-right: 20px;
        }
        .groupDiv:last-of-type{
          border-right: none;
        }
      }
      
      .main-inner{
        width: 80px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .name-inner{
        padding-left: 10px;
        font-weight: 500;
        font-size: 20px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .content-inner{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 16px;
        color: #000;
        width: 33%;
        
       
      }
    }
  }
  .upload-tab {
    height: 65px;
    overflow-x: auto;
    border-bottom: #21d0b6 2px solid;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    .baseDiv{
      flex-basis: 180px; 
      flex-shrink: 0; 
    }
  }
  .upload-tab div {
    width: 188px;
    height: 46px;
    display: inline-block;
    text-align: center;
    float: left;
    color: #606264;
    background: url('~@/assets/img/unactive.png')  no-repeat;
    line-height: 46px;
    font-size: 14px;
    margin-right: -16px;
    position: relative;
    z-index: 5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .upload-tab div .inner-title{
    padding: 0;
    margin: 0;
    height: 18px;
    line-height: 18px;
  }
  .upload-tab div.on {
    background: url('~@/assets/img/active.png')  no-repeat;
    color: #fff;
  }
  .upload-tab div:nth-child(1) {
    z-index: 21;
  }
  .upload-tab div:nth-child(2) {
    z-index: 20;
  }
  .upload-tab div:nth-child(3) {
    z-index: 19;
  }
  .upload-tab div:nth-child(4) {
    z-index: 18;
  }
  .upload-tab div:nth-child(5) {
    z-index: 17;
  }
  .upload-tab div:nth-child(6) {
    z-index: 16;
  }
  .upload-tab div:nth-child(7) {
    z-index: 15;
  }
  .upload-tab div:nth-child(8) {
    z-index: 14;
  }
  .upload-tab div:nth-child(9) {
    z-index: 13;
  }
  .upload-tab div:nth-child(10) {
    z-index: 12;
  }
  .upload-tab div:nth-child(11) {
    z-index: 11;
  }
  .upload-tab div:nth-child(12) {
    z-index: 10;
  }
  .upload-tab div:nth-child(13) {
    z-index: 9;
  }
  .upload-tab div:nth-child(14) {
    z-index: 8;
  }
  .upload-tab div:nth-child(15) {
    z-index: 7;
  }
  .upload-tab div:nth-child(16) {
    z-index: 6;
  }
  .upload-tab div:nth-child(17) {
    z-index: 5;
  }
  .upload-tab div:nth-child(18) {
    z-index: 4;
  }
  .upload-tab div:nth-child(19) {
    z-index: 3;
  }
  .upload-tab div:nth-child(20) {
    z-index: 2;
  }
  .upload-tab div:nth-child(21) {
    z-index: 1;
  }
</style>